<template>
  <div class="app-container">
    <el-form :inline="true" :model="tower" auto-complete="on" @submit.native.prevent>
      <el-form-item label="塔号">
        <el-input v-model="tower.towerNo" placeholder="请输入塔号" @keyup.enter.native="search"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-print="'#printForm'">打印本页</el-button>
      </el-form-item>
    </el-form>

    <el-form id="printForm" ref="print" label-width="75px" label-position="left" size="mini" v-if="data.towerItemList && data.towerItemList.length">
      <el-row class="el-row">
        <el-col :span="6" class="no-print">
          <el-button type="primary" @click="pre">上一条</el-button>
          <el-button type="primary" @click="next">下一条</el-button>
        </el-col>
        <el-col :span="18">
          <font>特别提示：此查询结果只适用于交流学习，实际数据还请自行对照图纸</font>
         </el-col>
      </el-row>

      <el-divider content-position="left">基础配置信息</el-divider>
      <el-row class="el-row">
        <el-col :span="6">
          <span>基位:<font v-text="data.towerNo"></font></span>
        </el-col>
        <el-col :span="6">
          <span>塔型-定位高(M):<font v-text="data.towerTypeLocationHigh"></font></span>
        </el-col>
        <el-col :span="12">
          <span>转角度数:<font v-text="data.rotationDegree"></font></span>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">
          <span>定位高:<font v-text="data.locationHigh"></font></span>
        </el-col>
        <el-col :span="6">
          <span>长短腿接身(M):<font v-text="data.joinBodyHigh"></font></span>
        </el-col>
        <el-col :span="12">
          <span>呼称高(M):<font v-text="data.callHigh"></font></span>
        </el-col>
      </el-row>

      <el-row v-for="item in data.towerItemList" class="el-row">
        <el-col :span="6">
          <span>基础型式{{item.key}}:<font v-text="item.basic"></font></span>
        </el-col>
        <el-col :span="6">
          <span>长短腿接腿(m):<font v-text="item.joinLegLength"></font></span>
        </el-col>
        <el-col :span="6">
          <span>基础立柱露高设计值(m):<font v-text="item.basicPillarDewHigh"></font></span>
        </el-col>
        <el-col :span="6">
          <span>中心桩到基础立柱顶面的高(m):<font v-text="item.centerPileToBasicPillarDewHigh"></font></span>
        </el-col>
      </el-row>
      <br>

      <el-divider content-position="left">铁塔及基础根开信息</el-divider>
      <el-row class="el-row" v-for="item in data.towerItemList">
        <el-col :span="6">
          <span>基础半根开{{item.key}}-对角C/2:<font v-text="item.baseDiagonal"></font></span>
        </el-col>
        <el-col :span="6">
          <span>基础半根开{{item.key}}-正侧面a(b)/2:<font v-text="item.baseIsTheSide"></font></span>
        </el-col>
      </el-row>

      <el-row class="el-row">
        <el-col :span="6">
          <span>地脚螺栓规格:<font v-text="data.anchorBoltType"></font></span>
        </el-col>
        <el-col :span="6">
          <span>正侧面:<font v-text="data.anchorBoltIsTheSide"></font></span>
        </el-col>
        <el-col :span="6">
          <span>对角:<font v-text="data.anchorBoltDiagonal"></font></span>
        </el-col>
      </el-row>

    </el-form>


  </div>
</template>

<script>
import { search } from '@/api/excel'
import DynamicTable from '@/components/Table/DynamicTable.vue'
export default {
  components: { DynamicTable },
  data() {
    return {
      dynamicTableShow: true,
      tower: {
        towerNo: ''
      },
      data: {}
    }
  },
  methods: {
    search() {
      this.data = {};
      return new Promise((resolve, reject) => {
        search(this.tower.towerNo).then(response => {
          const { data } = response
          console.log(data)
          this.data = data
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    printForm() {
      this.$print(this.$refs.print,{'no-print':'.className'});
    },
    pre() {
      this.tower.towerNo = this.data.pre
      this.search();
    },
    next() {
      this.tower.towerNo = this.data.next
      console.log(this.data.next)
      this.search();
    }
  }
}
</script>

<style scoped>
@page{
  size:  auto;   /* auto is the initial value */
  margin: 3mm;  /* this affects the margin in the printer settings */
}
@media print {
  .no-print {
    display: none;
  }
}
html{
  background-color: #FFFFFF;
  margin: 0;  /* this affects the margin on the html before sending to printer */
}
body{
  border: solid 1px blue ;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

.line{
  text-align: center;
}
.el-row{
  margin-top: 20px;
}
.el-row el-col {
  margin-top: 4px;
}
.el-row font {
  color: red;
  font-weight: bold;
  margin:10px 0px 0px 10px;
}
.form-table label {
  width: 90px;
  color: #99a9bf;
}
.form-table .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

